<template>
  <div>{{name}}</div>
</template>

<script>
import {
  reactive,
  ref,
  toRefs,
  onBeforeMount, //组件挂在到页面之前执行。
  onMounted, //组件挂在到页面之后执行。
  onBeforeUpdate, //在组件更新之前执行。
  onUpdated, //在组件更新之后执行。
  onBeforeUnmount, //在组件卸载之前执行。
  onUnmounted, //在组件卸载之后执行。
  onActivated, //被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
  onDeactivated, //在组件切换中老组件消失的时候执行  比如从 A 组件，切换到 B 组件，A 组件消失时执行。
  onErrorCaptured, //当捕获一个来自子孙组件的异常时激活钩子函数。
} from "vue";
export default {
  name: "",
  // 定义模板
  components: {},
  //在创建组件之前执行 合并了beforeCreate 和 created。
  setup(props, context) {
    const state = reactive({
      name: "你好",
    });
    const num = ref(0);

    onBeforeMount(() => {
      //组件挂在到页面之前执行。
    });

    onMounted(() => {
      //组件挂在到页面之后执行。
    });

    onBeforeUpdate(() => {
      //在组件更新之前执行。
    });

    onUpdated(() => {
      //在组件更新之后执行。
    });

    onBeforeUnmount(() => {
      //在组件卸载之前执行。
    });

    onUnmounted(() => {
      //在组件卸载之后执行。
    });

    onActivated(() => {
      //被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数。被激活时执行。
    });

    onDeactivated(() => {
      //在组件切换中老组件消失的时候执行  比如从 A 组件，切换到 B 组件，A 组件消失时执行。
    });

    onErrorCaptured(() => {
      //当捕获一个来自子孙组件的异常时激活钩子函数。
    });

    return {
      ...toRefs(state),
      num,
    };
  },
};
</script>
<style scoped lang ='less'>
</style>